<template>
	<view class="verification-page bgimg1 bgF8F8F8">
		<u-navbar :title="$t('hhh.t137')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>

		<view class="rounded-lg p-3 bg-white mx-3 mb-2 box-shadow2">
			<view class="flex align-center border-bottom py-1">
				<text class="label fs-28 text-black">{{$t('hhh.t133')}}</text>
				<u--input :placeholder="$t('hhh.t157')" border="surround" :readonly="info.status === 0"
					v-model.trim="info.real_name" :customStyle="{
							'border':0
						}"></u--input>
			</view>
			<view class="flex align-center py-1">
				<text class="label fs-28 text-black">{{$t('hhh.t134')}}</text>
				<u--input :placeholder="$t('hhh.t158')" border="surround" :readonly="info.status === 0"
					v-model.trim="info.id_number" :customStyle="{
							'border':0
						}"></u--input>
			</view>
		</view>

		<view class="rounded-lg px-3 pt-3 pb-5 bg-white mx-3">
			<view>{{$t('hhh.t135')}}</view>
			<view class="mt-4">
				<u-upload class="mx-auto" :fileList="front" :deletable="info.status !== 0" name="front" width="452rpx"
					height="284rpx" :maxCount="1" :previewFullImage="true" @afterRead="uploadFront"
					style="width: 452rpx;height: 284rpx;display: block;" :previewImage="true" @delete="deleteFront">
					<view>
						<image class="mx-auto flex" src="/static/imgs/verification_img2.png" mode="aspectFill"
							style="width: 452rpx;height: 284rpx;">
						</image>
					</view>
				</u-upload>
			</view>
		</view>

		<view class="rounded-lg px-3 pt-3 pb-5 bg-white mx-3 mb-2 mt-3">
			<view>{{$t('hhh.t136')}}</view>
			<view class="mt-4">
				<u-upload class="mx-auto" :fileList="back" :deletable="info.status !== 0" name="back" width="452rpx"
					height="284rpx" :maxCount="1" :previewFullImage="true" @afterRead="uploadBack"
					style="width: 452rpx;height: 284rpx;display: block;" :previewImage="true" @delete="deleteBack">
					<view>
						<image class="mx-auto flex" src="/static/imgs/verification_img2.png" mode="aspectFill"
							style="width: 452rpx;height: 284rpx;">
						</image>
					</view>
				</u-upload>
			</view>
		</view>
		<u-gap height="100" bgColor="transparent"></u-gap>
		<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold mx-3"
			@tap="idauthSubmit">{{$t('hhh.t31')}}</view>
		<u-gap height="80" bgColor="transparent"></u-gap>
	</view>
</template>

<script>
	import {
		imageToBase64,
		checkIDCard
	} from '@/utils/common.js'
	import {
		mapGetters
	} from 'vuex'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				front: [],
				back: [],
				info: {
					real_name: '',
					id_number: '',
					id_card_front: '',
					id_card_back: '',
					status: null
				}
			}
		},
		created() {
			uni.$tools.showLoading()
			this.idauthStatus()
		},
		methods: {
			deleteFront(val) {
				this.front = []
				this.info.id_card_front = ''
			},
			deleteBack() {
				this.back = []
				this.info.id_card_back = ''
			},
			async uploadFront(data) {
				const base64 = await imageToBase64(data.file.url)
				uni.$tools.uploadFile('/boss/upload/uploadFile', data.file.url, {
					base64: base64,
					type: 'image'
				}).then(res => {
					console.log(res)
					this.front = [{
						url: res.url,
					}]
					this.info.id_card_front = res.url
				})
			},
			async uploadBack(data) {
				const base64 = await imageToBase64(data.file.url)
				uni.$tools.uploadFile('/boss/upload/uploadFile', data.file.url, {
					base64: base64,
					type: 'image'
				}).then(res => {
					console.log(res)
					this.back = [{
						url: res.url
					}]
					this.info.id_card_back = res.url
				})
			},
			idauthSubmit() {
				if (this.info.status === 0) {
					uni.$tools.toast(this.$t('hhh.t132'))
					return
				}
				if (!this.info.real_name) {
					uni.$tools.toast(this.$t('hhh.t126'))
					return
				}
				if (!this.info.id_number) {
					uni.$tools.toast(this.$t('hhh.t127'))
					return
				}
				// if (!checkIDCard(this.info.id_number)) {
				// 	uni.$tools.toast(this.$t('hhh.t128'))
				// 	return
				// }
				if (!this.info.id_card_front) {
					uni.$tools.toast(this.$t('hhh.t129'))
					return
				}
				if (!this.info.id_card_back) {
					uni.$tools.toast(this.$t('hhh.t130'))
					return
				}
				HttpApi.idauthSubmit({
					real_name: this.info.name,
					id_number: this.info.number,
					id_card_front: this.info.front,
					id_card_back: this.info.back,
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t131'))
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
						// this.idauthStatus()
					}
				})
			},
			idauthStatus() {
				HttpApi.idauthStatus().then(res => {
					if (res.code === 1) {
						this.info = res.data
						// this.front = [{
						// 	url: res.data.id_card_front
						// }]
						// this.back = [{
						// 	url: res.data.id_card_back
						// }]
					}
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.verification-page {
		min-height: 100dvh;

		.label {
			width: 200rpx;
		}
	}
</style>